<template>
  <div class="app-container home" v-loading="jiaZai">

      <div>

        <div class="page-title">
          <h2>数据统计概览</h2>
          <p>实时监控系统关键指标和业务数据</p>
        </div>
        <el-row :gutter="20" class="stats-row" >
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">总用户数</span>
                <el-icon class="stat-icon user-icon"><User /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.allUserCount}}</div>
            </el-card>
          </el-col>
        </el-row>
        <div class="block">
          <el-date-picker
            v-model="timeList"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          />
          <el-button type="primary" plain style="margin-left: 20px" @click="getTimes">查询</el-button>
        </div>
        <el-row :gutter="20" class="stats-row">
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">用户（日增）</span>
                <el-icon class="stat-icon user-icon"><User /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.addUserCount}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">活跃用户</span>
                <el-icon class="stat-icon user-icon2"><User /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.huoYueUserCount}}</div>
            </el-card>
          </el-col>

          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">会员用户</span>
                <el-icon class="stat-icon user-icon3"><UserFilled /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.addVipUserCount}}</div>
            </el-card>
          </el-col>

          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">达人/数</span>
                <el-icon class="stat-icon user-icon4"><User /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.addDarenCount}}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="stats-row">
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">达人在班/数</span>
                <el-icon class="stat-icon user-icon5"><User /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.isCommutingCount}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">会员充值/金额</span>
                <el-icon class="stat-icon user-icon6"><Money /></el-icon>
              </div>
              <div class="stat-value">￥{{sumInfo.addVipMoney}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">软文种草/数</span>
                <el-icon class="stat-icon user-icon7"><Crop /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.yueJuCount}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">订单量</span>
                <el-icon class="stat-icon user-icon8"><Notification /></el-icon>
              </div>
              <div class="stat-value">{{sumInfo.yueDanCount}}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="stats-row">
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">订单金额</span>
                <el-icon class="stat-icon user-icon9"><Money /></el-icon>
              </div>
              <div class="stat-value">￥{{sumInfo.yueDanMoney}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">总收益</span>
                <el-icon class="stat-icon user-icon10"><Money /></el-icon>
              </div>
              <div class="stat-value">￥{{sumInfo.allShouyiMoney}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">分拨/分佣额</span>
                <el-icon class="stat-icon user-icon11"><Money /></el-icon>
              </div>
              <div class="stat-value">￥{{sumInfo.fenYongMoney}}</div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="6" class="stat-col">
            <el-card class="stat-card">
              <div class="stat-header">
                <span class="stat-title">净收益</span>
                <el-icon class="stat-icon user-icon12"><Money /></el-icon>
              </div>
              <div class="stat-value">￥{{sumInfo.jingShouYiMoney}}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
  </div>
</template>
<style>
.home {
  background-color: #f8f6f6;
}
.sum-one {
  background-color: #ffffff;
  border-radius: 6px;
  height: 100px;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;

}

.sum-two {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


/* 统计卡片 */
.stats-row {
  margin-bottom: 20px;
  margin-top: 20px;
}

.stat-card {
  height: 100%;
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.stat-title {
  font-size: 14px;
  color: #86909c;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-icon {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409eff;
}
.user-icon2 {
  background-color: #f3eddf;
  color: #f8a300;
}
.user-icon3 {
  background-color: #cfcfcf;
  color: #000000;
}
.user-icon4 {
  background-color: #ffe9e9;
  color: #ff0000;
}
.user-icon5 {
  background-color: #f1f2f6;
  color: #0145f3;
}
.user-icon6 {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409eff;
}
.user-icon7 {
  background-color: #f3eddf;
  color: #f8a300;
}
.user-icon8 {
  background-color: #cfcfcf;
  color: #000000;
}
.user-icon9 {
  background-color: #ffe9e9;
  color: #ff0000;
}
.user-icon10 {
  background-color: #f1f2f6;
  color: #0145f3;
}
.user-icon11 {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409eff;
}
.user-icon12 {
  background-color: #f1f2f6;
  color: #0145f3;
}
.block{
  margin-bottom: 20px;
}
</style>
<script setup name="SkShop" lang="ts">
import {getSumData} from '@/api/app/SkAppUser';
import {UserFilled} from "@element-plus/icons-vue";
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const timeList = ref([])
const jiaZai = ref(false)
const sumInfo = ref({
  addDarenCount:0,
  addUserCount:0,
  addVipMoney:0,
  addVipUserCount: 0,
  allShouyiMoney:0,
  fenYongMoney:0,
  huoYueUserCount:0,
  isCommutingCount:0,
  jingShouYiMoney:0,
  yueDanCount:0,
  yueDanMoney:0,
  yueJuCount:0,
  allUserCount:0,
})

const getTimes = async () => {
  console.log(timeList)
  jiaZai.value = true
  if (timeList==null || timeList.value.length==0){
    const now = new Date();
    const year = now.getFullYear();
    let month = now.getMonth() + 1;
    if (month<10){
      month = '0' + month
    }
    let day = now.getDate();
    if (day<10){
      day = '0' + day
    }
    console.log(year, month, day);
    console.log(timeList.value);
    timeList.value = [`${year}-${month}-${day}`, `${year}-${month}-${day}`]
  }
  const res = await getSumData(timeList.value[0], timeList.value[1]);
  if (res.code==200){
    sumInfo.value = res.data
    jiaZai.value = false
  }
  jiaZai.value = false
  console.log(res);
}
onMounted(() => {
  getTimes()
});
</script>
